<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <div class="d-flex align-center">Mobile view in one page.</div>

      <v-spacer></v-spacer>
      <v-btn @click="add" text>
        <span class="mr-2">添加</span>
      </v-btn>
      <v-btn href="http://www.xu81.com" target="_blank" text>
        <span class="mr-2">xu81.com</span>
        <v-icon>fa-external-link-alt</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <v-container class="d-flex justify-start float-left">
        <template v-for="(item, i) in list">
          <Mview :src="item.src" :title="item.title" :key="i" />
        </template>
      </v-container>
      <v-dialog v-model="addDialog" persistent max-width="500px">
        <v-card>
          <v-card-title>
            <span class="headline">添加</span>
          </v-card-title>

          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12">
                  <v-text-field
                    v-model="item.title"
                    label="标题"
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field v-model="item.src" label="地址"></v-text-field>
                </v-col>
              </v-row>
            </v-container>
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="addDialog = false"
              >取消</v-btn
            >
            <v-btn color="primary darken-1" @click="save">保存</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-main>
  </v-app>
</template>

<script>
import Mview from "./components/Mview";

export default {
  name: "App",

  components: {
    Mview,
  },

  data: () => ({
    addDialog: false,
    list: [],
    item: {},
  }),
  mounted() {
    let listStr = localStorage.getItem('list')
    if(listStr){
      this.list = JSON.parse(listStr)
    }
  },
  methods: {
    add(){
      this.addDialog = true
    },
    save(){
      this.list.push(this.item)
      localStorage.setItem('list', JSON.stringify(this.list))
      this.item = {}
      this.addDialog = false
    }
  },
};
</script>
